@charset "utf-8";
@include ns(tree) {
  ul {padding-left: 20px !important;}
  i {vertical-align: middle;transition: all .3s;cursor: pointer;opacity: 0;display: inline-block;
    width: 0;
    height: 0;
    border-width: 5px;
    border-style: solid;
    border-color: transparent transparent transparent #666;}
  i.has-child {opacity: 1;}
  // 有子级时显示icon
  i.open-child {transform: rotate(90deg);}
  span {display: inline-block;vertical-align: middle}
  .checked {color: red}
  .tree-loading {
    // 异步加载时等待动画
    height: 24px;
    &:after {content: '';width: 15px;height: 15px;border: 1px solid #666;border-right: 1px solid transparent;display: block;border-radius: 50%;animation: treeLoad 1s infinite linear both;}
  }
}
@keyframes treeLoad {
  0% {transform: rotate(0)}
  100% {transform: rotate(360deg)}
}
/*
@include ns(tree) {
  $pngBase: '';
  li { line-height: 24px; position: relative;padding: 0;margin: 0;list-style: none;transition: all .3s;max-height: 24px;
    i { display: inline-block; vertical-align: middle; background: url($pngBase) no-repeat 4px -11px; width: 18px; height: 18px; cursor: pointer;
      &.last-child { background-position: 4px -29px }
      &.has-child { background-position: -13px 2px }
      &.open-child { background-position: -13px -16px }
    }
    a { display: inline-block; vertical-align: middle; cursor: pointer;
      &.active { color: #f00 }
    }
    label {margin-right: 3px;}
    ul { padding-left: 18px; background: url($pngBase) repeat-y -39px top;max-height: 24px;transition: all .3s; }
    &.active {max-height: 500px;
      ul {max-height: 500px;}
    }
    &.selected > a {color: red}
  }
  .tree-loading {
    // 异步加载时等待动画
    height: 24px;
    &:after {content: '';width: 15px;height: 15px;border: 1px solid #666;border-right: 1px solid transparent;display: block;border-radius: 50%;animation: treeLoad 1s infinite linear both;}
  }
}

// 展开收起ul动画
.tree-toggle-enter-active { animation: tree-toggle-down .3s; transform-origin: center top }
.tree-toggle-leave-active { animation: tree-toggle-up .3s; transform-origin: center top }
@keyframes tree-toggle-down {
  0% { opacity: 0; transform: scaleY(0); }
  100% { opacity: 1; transform: scaleY(1); }
}
@keyframes tree-toggle-up {
  0% { opacity: 1; transform: scaleY(1); }
  100% { opacity: 0; transform: scaleY(0); }
}
*/
